<template>
    <div class="resource-container">
      <div class="title-box">
        <span class="left">Making an orientation</span>
        <!--<div class="right">-->
          <!--<i class="el-icon-question"></i>-->
        <!--</div>-->
      </div>
      <el-collapse :value="[0]" v-if="resourceList.length > 0">
        <el-collapse-item v-for="(item, index) of resourceList" :key="index" :title="titleFormate(item.displayType)" :name="index">
          <span v-if="item.displayType === '1'">{{item.resourceTrainingContentEn}}</span>
          <img v-if="item.displayType === '2'" :src="item.fileUrl" style="width:100%;height: auto">
          <audio v-if="item.displayType === '3'" style="width: 100%;outline:none" controls :src="item.fileUrl" controlsList="nodownload"></audio>
          <video  v-if="item.displayType === '4'" class="video" controls :src="item.fileUrl">
            <track v-if="item.subtitleUrl" :src="item.subtitlesEnUrl" lang="en" label="English" kind="subtitles" default />
          </video>
        </el-collapse-item>
      </el-collapse>
      <el-divider></el-divider>
      <!-- 答题卡  -->
      <div class="answer-panel">
        <span class="title">答题卡</span>
        <div class="panel">
          <div v-for="item of answerCard"
               :key="item"
               @click="answerCardSl(item)"
               :class="{'cell': true,'select':(item === $parent.activeSubjectIndex)}">{{item + 1}}</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'resourcePanel',
  props: {
    /**
     * type：'1': '文本','2': '图片','3': '音频','4': '视频'
     * @param value
     */
    resourceList: { // 资源列表
      type: Array,
      validator: function (value) {
        if (!value) return false // 空，校验失败，如果为空，必须是空数组
        if (value.length === 0) return true
        return true
      }
    },
    taskName: String,
    subjectNum: Number
  },
  data () {
    return {
      answerCard: []
    }
  },
  methods: {
    answerCardSl (data) {
      if (data === this.$parent.activeSubjectIndex) return
      this.$emit('changeIndex', data)
    }
  },
  computed: {
    titleFormate () {
      return function (type) {
        if (type === '1') return '文本'
        else if (type === '2') return '图片'
        else if (type === '3') return '音频'
        else if (type === '4') return '视频'
        return '其他类型'
      }
    }
  },
  created () {
    if (this.subjectNum === null || this.subjectNum === undefined || this.subjectNum.length === 0) {
      this.answerCard = []
      return
    }
    const array = []
    for (let i = 0; i < this.subjectNum; i++) {
      array.push(i)
    }
    this.answerCard = array
  }
}
</script>

<style lang="scss" scoped>
.resource-container{
  width: 472px;
  height: 726px;
  overflow-y: auto;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  .title-box{
    width: 100%;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .video {
    width: 442px;
    height: auto;
    outline: none;
  }
  .answer-panel{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-flow: column nowrap;
    .title{
      font-size:22px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(16,29,55,1);
    }
    .panel{
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      margin-top: 30px;
      .cell{
        width: 38.4px;
        height: 38.4px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:19px;
        font-family:PingFang SC;
        font-weight:500;
        margin-right: 16px;
        margin-bottom: 16px;
        cursor: pointer;
        border:1px solid #91959a;
        color:#91959a;
      }
      .select{
        border:1px solid rgba(0,156,246,1);
        color:rgba(0,156,246,1);
      }
    }
  }
}
</style>
